<template>
  <div class="search_box" :style="{ padding: isPadding0 ? '0' : '' }">
    <ga-table-tool
      :placeholder="placeholder"
      @handle-search="onSearch"
      @handle-refresh="
        selectedIds = [];
        fetchData();
      "
      :columns="columns"
      :showSearch="showSearch"
      input-width="300px"
      :showSetColumn="showSetColumn"
      :showDownload="showDownload"
      @handleSubColumnSetting="(val) => $emit('handleSubColumnSetting', val)"
      @handleDownload="handleDownload"
    >
      <template #search v-if="!showSearch">
        <slot name="search" />
      </template>
      <template #filter>
        <slot name="filterOpt" />
      </template>
      <template #btns>
        <ga-button
          v-if="isShowAddBtn"
          type="primary"
          @click="$emit('handleEditOrAdd', 'add')"
          >{{ addText }}
        </ga-button>
        <div class="flex">
          <slot name="operatBtns" />
        </div>
      </template>
    </ga-table-tool>
  </div>
  <div class="content_info" :style="{ height, padding: isPadding0 ? '0' : '' }">
    <ga-table
      v-if="!loading"
      row-key="id"
      :loading="loading"
      :pagination="false"
      :columns="columns"
      :data="tableData"
      :bordered="false"
      :hoverable="false"
      v-model:selectedKeys="selectedIds"
      :scroll="isScroll ? scroll : false"
      :row-selection="isRowSelection ? rowSelection : false"
      @selection-change="(val) => $emit('handleSelectionChange', val)"
    >
      <template v-for="item in columns" :key="index" #[item?.slotName]="{ record }">
        <slot :name="item?.slotName" :record="record" />
      </template>
    </ga-table>
    <Pagination
      v-if="total > 0 && isShowPagination"
      :total="total"
      :page="listQuery.page"
      :limit="listQuery.limit"
      @pagination="handlePagination"
    />
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading(false);
const total = ref(0);
const rowSelection = reactive({
  type: "checkbox",
  width: 30,
  showCheckedAll: true,
});
const scroll = {
  x: 1800,
  // y: 200,
};
const tableData = ref([]);
const props = defineProps({
  // 请求地址
  apiUrl: {
    type: String,
    default: "",
  },
  // 搜索框提示
  placeholder: {
    type: String,
    default: "请输入内容",
  },
  // 表格列数
  columns: {
    type: Array,
    default: () => [],
  },
  // 请求其他query参数
  otherQuery: {
    type: String,
    default: "",
  },
  // 当前rowId
  rowId: {
    type: String,
    default: "",
  },
  // 是否多选
  isRowSelection: {
    type: Boolean,
    default: false,
  },
  // 是否有滚动条
  isScroll: {
    type: Boolean,
    default: false,
  },
  // 是否有添加按钮
  isShowAddBtn: {
    type: Boolean,
    default: true,
  },
  // 是否显示分页
  isShowPagination: {
    type: Boolean,
    default: true,
  },
  // 是否显示搜索
  showSearch: {
    type: Boolean,
    default: true,
  },
  // 是否显示列设置
  showSetColumn: {
    type: Boolean,
    default: false,
  },
  // 是否显示下载
  showDownload: {
    type: Boolean,
    default: false,
  },
  // 表格高度
  height: {
    type: String,
    default: "calc(100vh - 236px)",
  },
  // 是否padding0
  isPadding0: {
    type: Boolean,
    default: false,
  },
  // 按钮文本
  addText: {
    type: String,
    default: "创建",
  },
});
const selectedIds = ref([]);
const listQuery = reactive({
  page: 1,
  limit: 10,
  search: "",
  ...props.otherQuery,
});
const { apiUrl, rowId, otherQuery } = toRefs(props);
// 列表
const fetchData = async (otherVal) => {
  const query = { ...listQuery, ...otherVal };
  setLoading(true);
  try {
    const { data, code } = await apiUrl.value(query, rowId.value);
    if (code === 20000) {
      if (props.isChangeColumns) {
        tableData.value = data?.items?.map((item) => ({
          ...item,
          disabled: item.resourceType === "vmware",
        }));
      } else {
        tableData.value = data?.items || data || [];
      }
      total.value = data?.total;
    }
  } catch (err) {
    console.log(err);
  } finally {
    setLoading(false);
  }
};
// 处理方法
const handleDownload = (method) => {
  method(tableData.value, props.columns);
};
// 搜索
const onSearch = (val) => {
  listQuery.search = val?.trim();
  selectedIds.value = [];
  fetchData();
};
// 分页
const handlePagination = (val) => {
  listQuery.page = 1;
  const { page, limit } = val;
  listQuery.limit = Number(limit);
  listQuery.page = Number(page);
  fetchData();
};
onMounted(() => {
  fetchData();
});
defineExpose({ fetchData, tableData });
</script>

<style lang="scss" scoped></style>
